<script setup>
import { computed, nextTick, ref, watch } from "vue";
// import ImageUpload from "@/components/ImageUpload/index.vue";
import MapContainer from "./MapContainer";
import {
  addCommunityApi,
  getCommunityApi,
  editCommunityApi,
} from "@/api/community";
// import QuillEditor from "@/components/QuillEditor/index.vue";
import { ElMessage } from "element-plus";
const props = defineProps({});

const isShow = ref(false);
const activeName = ref("first");

const defaultFormData = () => ({
  address: "",
  area: "",
  developer: "",
  estate: "",
  greening_rate: "",
  introduction: "",
  name: "",
  position: "",
  thumb: "",
  total_building: "",
  total_owner: "",
});

const formData = ref(defaultFormData());
const formRules = {
  name: [{ required: true, message: "请输入小区名称", trigger: "blur" }],
  address: [{ required: true, message: "请输入坐落地址", trigger: "blur" }],
  area: [{ required: true, message: "请输入占地面积", trigger: "blur" }],
  developer: [{ required: true, message: "请输入开发商", trigger: "blur" }],
  estate: [{ required: true, message: "请输入物业公司", trigger: "blur" }],
  greening_rate: [{ required: true, message: "请输入绿化率", trigger: "blur" }],
  total_building: [
    { required: true, message: "请输入总栋数", trigger: "blur" },
  ],
  total_owner: [{ required: true, message: "请输入总户数", trigger: "blur" }],
  position: [{ required: true, message: "请选择经纬度", trigger: "change" }],
};

const title = computed(() => {
  return formData.value.id ? "修改小区" : "新增小区";
});

// 关闭
const quillRef = ref();
const closeDrawer = () => {
  // console.log("关闭前");
  formData.value = defaultFormData();
  formRef.value.resetFields();
  quillRef.value.setHTML("");
  isShow.value = false;
};

const formRef = ref();
const emit = defineEmits(["updateList"]);

// 回显
const replyData = async (id) => {
  const res = await getCommunityApi(id);
  formData.value = res.data;
  isShow.value = true;
};

watch(
  () => formData.value.introduction,
  async (newVal) => {
    // console.log(newVal);
    if (formData.value.id) {
      await nextTick();
      quillRef.value.setHTML(newVal);
    }
  }
);

// 获取经纬度
const position = ref("");
const isOpen = ref(false);
const changMap = (val) => {
  console.log(val);
  position.value = val;
  // formData.value.position = val;
};

const checkPosition = () => {
  formData.value.position = position.value;
  isOpen.value = false;
};

// 提交
const onSubmit = async () => {
  try {
    await formRef.value.validate();
    formData.value.id
      ? await editCommunityApi(toRaw(formData.value))
      : await addCommunityApi(toRaw(formData.value));
    ElMessage.success(formData.value.id ? "修改成功" : "添加成功");
    emit("updateList");
    closeDrawer();
  } catch (error) {
    console.log(error);
  }
};

defineExpose({
  isShow,
  replyData,
  isOpen,
});
</script>

<template>
  <div>
    <el-drawer
      :title="title"
      v-model="isShow"
      direction="rtl"
      size="45%"
      :before-close="closeDrawer"
      :show-close="true"
      destroy-on-close
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="80px"
        label-position="top"
        :inline="false"
      >
        <el-tabs v-model="activeName">
          <el-tab-pane label="基本信息" name="first">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="小区名称" prop="name">
                  <el-input
                    v-model="formData.name"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="坐落地址"
                  label-width="150px"
                  prop="address"
                >
                  <el-input
                    v-model="formData.address"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="占地面积" prop="area">
                  <el-input
                    v-model="formData.area"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="开发商名称" prop="developer">
                  <el-input
                    v-model="formData.developer"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="物业公司名称" prop="estate">
                  <el-input
                    v-model="formData.estate"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="绿化率" prop="greening_rate">
                  <el-input
                    v-model="formData.greening_rate"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="总栋数" prop="total_building">
                  <el-input
                    v-model.number="formData.total_building"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="总户数" prop="total_owner">
                  <el-input
                    v-model.number="formData.total_owner"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="详细信息" name="second">
            <el-row :gutter="20">
              <el-col :span="12" :offset="0">
                <el-form-item label="小区图片" prop="thumb">
                  <ImageUpload
                    v-model="formData.thumb"
                    :type="'community'"
                  ></ImageUpload>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="0">
                <el-form-item label="经纬度" prop="position">
                  <el-input v-model="formData.position" readonly>
                    <template #append>
                      <el-button type="primary" @click="isOpen = true"
                        >获取经纬度</el-button
                      >
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="详细描述" ref="desRef" prop="introduction">
              <!-- {{ formData.introduction }} -->
              <QuillEditor
                v-model:content="formData.introduction"
                contentType="html"
                ref="quillRef"
              ></QuillEditor>
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定</el-button>
          <el-button @click="closeDrawer">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <!-- 地图获取经纬度 -->
    <el-dialog title="获取经纬度" v-model="isOpen" width="70%">
      <MapContainer @changePosition="changMap"></MapContainer>
      <!-- <template #footer> </template> -->
      <span slot="footer">
        <el-button @click="isOpen = false">取消</el-button>
        <el-button type="primary" @click="checkPosition">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
:deep(.ql-toolbar) {
  width: 500px;
}
:deep(.ql-container) {
  height: 200px;
  width: 500px;
}
</style>
